<template>
  <div style="height:100%;">
    <div class="header">
      <div class="selectRange">
        <div class="showtime">{{ formatDate(date) }}</div>
      </div>
      <div class="flex flex-row justify-between items-center dbanniu">
        <div class="flex flex-row items-center justify-between">
          <i class="iconfont icon-index"></i>
          <span class="blue">首页</span>
        </div>
        <!-- <div class="flex flex-row items-center justify-between ml100">
          <i class="iconfont icon-shezhi"></i>
          <span class="blue">设置</span>
        </div>
        <div class="flex flex-row items-center justify-between ml100">
          <i class="iconfont icon-tuichu"></i>
          <span class="blue">退出</span>
        </div> -->
      </div>
      <div class="header-title">
        苏州市机关事务-智慧餐厅
      </div>
      <div class="selectRange"></div>
    </div>
    <Modal
      v-model="modal"
      title="选择时间"
      :mask-closable="false"
      @on-ok="getMonthBetween(startTime, endTime)"
    >
      <DatePicker
        @on-change="pickStartDate"
        :options="optionStart"
        type="date"
        placeholder="选择开始日期"
        style="width: 200px"
      ></DatePicker>
      <span style="padding:0 20px;color:#75deef">至</span>
      <DatePicker
        @on-change="pickEndDate"
        :options="optionEnd"
        type="date"
        placeholder="选择结束日期"
        style="width: 200px"
      ></DatePicker>
    </Modal>
    <div class="page">
      <router-view v-if="flag" :selectRangeDate="selectRangeDate"></router-view>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      activeName: "month", // 默认显示近一月
      modal: false,
      flag: false,
      selectRangeDate: [],
      startTime: "",
      endTime: "",
      date: new Date(),
      optionStart: {
        disabledDate(date) {
          // 禁止选择今天之后的日期
          return date && date.valueOf() > Date.now() - 86400000;
        },
      },
      optionEnd: {},
      resizeFn: null,
    };
  },

  mounted() {
    var _this = this; //声明一个变量指向Vue实例this，保证作用域一致
    this.timer = setInterval(function() {
      _this.date = new Date(); //修改数据date
    }, 1000);
    window.addEventListener("resize", this.resizeFn);
    this.handleSelect(this.activeName); // 默认显示近一个月
  },
  beforeDestroy: function() {
    if (this.timer) {
      clearInterval(this.timer); //在Vue实例销毁前，清除我们的定时器
    }
  },
  methods: {
    formatDate(value) {
      var padDate = function(value) {
        return value < 10 ? "0" + value : value;
      };
      var date = new Date(value);
      var year = date.getFullYear();
      var month = padDate(date.getMonth() + 1);
      var day = padDate(date.getDate());
      var hours = padDate(date.getHours());
      var minutes = padDate(date.getMinutes());
      var seconds = padDate(date.getSeconds());
      return (
        year +
        "-" +
        month +
        "-" +
        day +
        "" +
        " " +
        hours +
        ":" +
        minutes +
        ":" +
        seconds
      );
    },

    pickStartDate(date) {
      // 选择开始时间的回调
      this.startTime = date;
      this.optionEnd = {
        disabledDate(d) {
          // 禁止选择开始时间之前的日期
          return d && d.valueOf() < new Date(date).valueOf() - 86400000;
        },
      };
    },
    pickEndDate(date) {
      // 选择结束时间的回调
      this.endTime = date;
    },
    getMonthBetween(start, end) {
      // 获取开始时间和结束时间之内的所有月份
      this.selectRangeDate = [];
      let s = start.split("-"); // 字符串装换数组
      let e = end.split("-");
      let date = new Date();
      let min = date.setFullYear(s[0], s[1] - 1); // 设置最小时间
      let max = date.setFullYear(e[0], e[1] - 1); // 设置最大时间
      let curr = min;
      while (curr <= max) {
        // 循环添加月份
        var month = curr.getMonth();
        var arr = [curr.getFullYear(), month + 1];
        this.selectRangeDate.push(arr);
        curr.setMonth(month + 1);
      }
    },
    getDays(day) {
      // 获取天数
      let arr = [];
      for (let i = -day; i < 0; i++) {
        // 循环添加天数
        let today = new Date(); // 获取今天
        let targetday_milliseconds = today.getTime() + 1000 * 60 * 60 * 24 * i;
        today.setTime(targetday_milliseconds); //设置i天前的时间
        let tYear = today.getFullYear();
        let tMonth = today.getMonth();
        let tDate = today.getDate();
        let date = [tYear, tMonth + 1, tDate];
        arr.push(date);
      }
      return arr;
    },
    handleSelect(name) {
      switch (name) {
        case "day":
          break;
        case "week":
          this.selectRangeDate = this.getDays(7); // 获取近一周的天数
          this.flag = true;

          break;
        case "month":
          this.selectRangeDate = this.getDays(30); // 获取近一个月的天数
          this.flag = true;
          break;
        case "filter":
          this.modal = true;
          break;
        default:
          break;
      }
    },
  },
};
</script>

<style lang="less">
/* 在线链接服务仅供平台体验和调试使用，平台不承诺服务的稳定性，企业客户需下载字体包自行发布使用并做好备份。 */
/* 在线链接服务仅供平台体验和调试使用，平台不承诺服务的稳定性，企业客户需下载字体包自行发布使用并做好备份。 */
@font-face {
  font-family: "iconfont"; /* Project id 619978 */
  src: url("//at.alicdn.com/t/c/font_619978_gxw3cl78zs.woff2?t=1701409155485")
      format("woff2"),
    url("//at.alicdn.com/t/c/font_619978_gxw3cl78zs.woff?t=1701409155485")
      format("woff"),
    url("//at.alicdn.com/t/c/font_619978_gxw3cl78zs.ttf?t=1701409155485")
      format("truetype");
}
.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  color: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.icon-index:before {
  content: "\e600";
}
.icon-shezhi:before {
  content: "\e611";
}
.icon-tuichu:before {
  content: "\e60a";
}
.icon-navicon-ctgl:before {
  content: "\e649";
}
.dbanniu {
  position: fixed;
  right: 100px;
  top: 10px;
  i {
    color: #fff;
    background: center center rgb(0, 150, 236);
    background-image: linear-gradient(315deg, #6772ff 0, rgb(0, 150, 236) 100%);
    background-size: 104% 104%;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    margin-right: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  span {
    font-size: 16px;
    color: rgb(0, 150, 236);
  }
}
.ml100 {
  margin-left: 20px;
}
.showtime {
  color: rgb(0, 150, 236);
  font-size: 22px;
  padding: 10px;
  position: absolute;
  left: 0;
  top: 0;
}
.ivu-modal {
  .ivu-modal-content {
    background: #071332;

    .ivu-modal-header {
      border-bottom: 1px solid #1a3c58;

      .ivu-modal-header-inner {
        color: #75deef;
      }
    }

    .ivu-modal-body {
      text-align: center;

      .ivu-icon {
        color: #75deef;
      }

      .ivu-modal-confirm-body {
        padding-left: 0;
        color: #75deef;
      }

      .ivu-input {
        background-color: rgba(0, 0, 0, 0);
        border: 1px solid #1a3c58;
        color: #75deef;

        &::-webkit-input-placeholder {
          /* WebKit, Blink, Edge */
          color: #75deef;
        }

        &::-moz-placeholder {
          /* Mozilla Firefox 4 to 18 */
          color: #75deef;
        }

        &::-moz-placeholder {
          /* Mozilla Firefox 19+ */
          color: #75deef;
        }

        &::-ms-input-placeholder {
          /* Internet Explorer 10-11 */
          color: #75deef;
        }
      }

      .ivu-picker-panel-body {
        background: #071332;

        .ivu-date-picker-header {
          color: #75deef;
          border-bottom: 1px solid #1a3c58;
        }

        .ivu-date-picker-cells-cell {
          color: #75deef;

          &:hover em {
            background: #1a3c58;
          }
        }

        .ivu-date-picker-cells-cell-disabled {
          background: rgba(0, 0, 0, 0);
          color: #eee;
        }

        .ivu-date-picker-cells-focused em {
          box-shadow: 0 0 0 1px #1a3c58 inset;

          &::after {
            background: #1a3c58;
          }
        }
      }
    }

    .ivu-modal-footer {
      border-top: 1px solid #1a3c58;

      .ivu-btn-primary {
        color: #75deef;
        background: #1a3c58;
      }

      .ivu-btn-text {
        color: #ddd;

        &:hover {
          color: #75deef;
          background: #1a3c58;
        }
      }
    }
  }
}

.header {
  height: 80px;
  background: #03044a;
  background: url("../assets/images/u0.svg") no-repeat;
  background-size: 100% 100%;
  display: flex;
  justify-content: center;
  align-items: center;

  &-title {
    color: #fff;
    font-size: 36px;
    font-weight: bold;
  }

  .selectRange {
    height: 100%;

    .ivu-menu-horizontal {
      background: rgba(255, 255, 255, 0);

      &::after {
        height: 0;
      }

      .ivu-menu-item-active {
        border-bottom: 2px solid #264e5e;
      }

      .ivu-menu-item,
      .ivu-menu-submenu {
        color: #75deef;

        &:hover {
          border-bottom: 2px solid #264e5e;
        }
      }

      .ivu-select-dropdown {
        background: #09102e;

        .ivu-menu-item {
          color: #75deef;

          &:hover {
            border-bottom: 2px solid #264e5e;
            background-color: rgba(255, 255, 255, 0);
          }
        }
      }

      .ivu-menu-submenu-title {
        i {
          margin-right: 0;
        }

        .ivu-icon-ios-arrow-down {
          display: none;
        }
      }
    }
  }
}

.page {
  height: calc(~"100% - 80px");
}
</style>
